<template>
    <h1>图书管理系统</h1>
    <div>
        <table>
            <thead>
                <tr>
                    <th>图书编号</th>
                    <th>书名</th>
                    <th>价格</th>
                    <th>作者</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item of book">
                    <td>{{ item.id }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.price }}</td>
                    <td>{{ item.author }}</td>
                </tr>
            </tbody>
        </table>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';

let book = ref([])

onMounted(
    async () => {
        try {
            const res = await fetch('http://localhost:5000/books')
            if (res.ok) {
                book.value = await res.json()
            }
        } catch (err) {
            console.log(err);

        }
    }

)


</script>
<style scoped>
h1 {
    text-align: center;
}

table {
    width: 1200px;
    min-height: 200px;
    border-collapse: collapse;
    text-align: center;
}

tr,
td,
th {
    border: 1px solid black;
    line-height: 40px;
}
</style>